<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 创建自定义事件对象
    const processingEvent = new Event('processing');

    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    // 定义数据处理函数
    async function processData(data) {
        // 触发自定义事件，表示数据处理开始
        document.dispatchEvent(processingEvent);
        
        try {
            // 数据处理逻辑
            await delay(2000)
            const result = '/* 数据处理结果 */';

            // 触发自定义事件，表示数据处理完成，并传递处理结果
            const completionEvent = new CustomEvent('completion', { detail: result });
            document.dispatchEvent(completionEvent);
            // throw new Error('错误')
        } catch (error) {
            // 触发自定义事件，表示数据处理出错，并传递错误信息
            const errorEvent = new CustomEvent('error', { detail: error });
            document.dispatchEvent(errorEvent);
        }
    }

    // 外部代码订阅自定义事件
    document.addEventListener('processing', function () {
        // 数据处理开始的处理逻辑
        console.log('processing');
    });

    document.addEventListener('completion', function (event) {
        // 数据处理完成的处理逻辑，可以通过 event.detail 获取处理结果
        console.log('completion');
    });

    document.addEventListener('error', function (event) {
        // 数据处理出错的处理逻辑，可以通过 event.detail 获取错误信息
        console.log('error');
    });

    // 调用数据处理函数
    processData();
</script>

</html>